<template>
  <el-card class="preview-card">
    <!-- 预览内容根容器：完整应用base样式 -->
    <div class="preview-content"
         :style="{
           fontFamily: style.base.fontFamily,
           color: style.base.primaryColor,
           backgroundColor: style.base.bgColor,
           padding: style.base.padding,
           maxWidth: style.base.maxWidth,
           margin: style.base.margin,
           borderRadius: style.base.borderRadius,
           boxShadow: style.base.boxShadow || 'none',
           minHeight: '600px'
         }">
      <!-- 固定模块列表：移除独立的照片模块，将其融入基本信息模块 -->
      <div class="fixed-modules-container">
        <!-- 1. 基本信息模块（含右侧头像） -->
        <div class="fixed-module" :style="{ marginBottom: style.base.spacing + 'px' }">
          <!-- 基本信息标题：支持模板控制显示/隐藏 -->
          <h3 class="section-title"
              :style="{
                fontSize: style.basic.title?.fontSize + 'px' || style.education.title.fontSize + 'px',
                fontWeight: style.basic.title?.fontWeight || style.education.title.fontWeight,
                margin: style.basic.title?.margin || '0 0 ' + style.education.title.marginBottom + 'px 0',
                color: style.basic.title?.color || style.education.title.color,
                lineHeight: '1.5',
                paddingLeft: style.basic.title?.paddingLeft || 0,
                borderLeft: style.basic.title?.borderLeft || 'none',
                display: style.basic.title?.display || 'block'
              }">
            基本信息
          </h3>
          <div class="module-content">
            <!-- 核心：根据模板布局类型渲染不同的容器 -->
            <div class="basic-flex-container" 
                 :style="getBasicContainerStyle()">
              <!-- 左侧：基本信息内容（姓名、联系方式、简介） -->
              <div class="basic-info-left" :style="{ flex: 1 }"> <!-- 占满剩余宽度，避免挤压 -->
                <h2 class="preview-name"
                    :style="{
                      fontSize: style.basic.name.fontSize + 'px',
                      fontWeight: style.basic.name.fontWeight,
                      textAlign: style.basic.name.textAlign || 'left',
                      margin: style.basic.name.margin || '0 0 ' + style.basic.name.marginBottom + 'px 0',
                      color: style.basic.name.color || style.base.primaryColor,
                      letterSpacing: style.basic.name.letterSpacing || 'normal'
                    }">
                  {{ getField('name') || '未填写姓名' }}
                </h2>
                <!-- 基本信息项：支持模板控制布局 -->
                <div class="basic-info"
                     :style="{ 
                       display: style.basic.infoItem.display || 'block', 
                       flexWrap: style.basic.infoItem.flexWrap || 'wrap', 
                       gap: style.basic.infoItem.gap + 'px',
                       fontSize: style.basic.infoItem.fontSize + 'px',
                       justifyContent: style.basic.infoItem.justifyContent || 'flex-start'
                     }">
                  <p class="info-item">{{ getField('phone') ? '电话：' + getField('phone') : '未填写电话' }}</p>
                  <p class="info-item">{{ getField('email') ? '邮箱：' + getField('email') : '未填写邮箱' }}</p>
                  <p class="info-item">{{ getField('intention') ? '意向：' + getField('intention') : '未填写求职意向' }}</p>
                </div>
                <!-- 个人简介：限制宽度，避免与头像重叠 -->
                <p class="preview-intro"
                   :style="{ 
                     fontSize: style.basic.intro.fontSize + 'px', 
                     lineHeight: style.basic.intro.lineHeight,
                     marginTop: style.basic.intro.marginTop + 'px',
                     color: style.basic.intro.color || style.base.secondaryColor,
                     textAlign: style.basic.intro.textAlign || 'left',
                     padding: style.basic.intro.padding || 0,
                     backgroundColor: style.basic.intro.backgroundColor || 'transparent',
                     borderRadius: style.basic.intro.borderRadius || 0,
                     maxWidth: style.basic.intro.maxWidth || '500px'
                   }">
                  {{ getField('intro') || '未填写个人简介' }}
                </p>
              </div>

              <!-- 头像模块（始终显示，不依赖模板modules） -->
              <div v-if="resolvedPhotoUrl || resumeStore.currentTemplate?.modules?.includes('photo')" 
                   class="preview-photo"
                   :style="getPhotoStyle()">
                <img 
                  v-if="resolvedPhotoUrl"
                  :src="getPhotoSrc(resolvedPhotoUrl)" 
                  :style="{ width: '100%', height: '100%', 'object-fit': 'cover' }" 
                />
                <span v-else>未上传照片</span>
              </div>
            </div>
          </div>
          <!-- 基本信息下方分隔线 -->
          <div class="preview-divider" :style="{
            height: '1px',
            backgroundColor: style.base.dividerColor,
            margin: style.base.spacing + 'px 0',
            display: style.base.dividerColor === 'transparent' ? 'none' : 'block'
          }"></div>
        </div>

        <!-- 2. 教育经历模块（保持不变） -->
        <div class="fixed-module" :style="{ marginBottom: style.base.spacing + 'px' }">
          <h3 class="section-title"
              :style="{
                fontSize: style.education.title.fontSize + 'px',
                fontWeight: style.education.title.fontWeight,
                margin: style.education.title.margin || '0 0 ' + style.education.title.marginBottom + 'px 0',
                color: style.education.title.color,
                paddingLeft: style.education.title.paddingLeft || 0,
                borderLeft: style.education.title.borderLeft || 'none',
                paddingBottom: style.education.title.paddingBottom || 0,
                borderBottom: style.education.title.borderBottom || 'none',
                display: style.education.title.display || 'block'
              }">
            教育经历
          </h3>
          <div class="module-content">
            <div class="preview-list">
              <div v-for="(item, index) in resolvedEducation.slice(0, 3)" :key="index" class="preview-item"
                   :style="{ 
                     marginBottom: style.education.item.marginBottom + 'px', 
                     padding: style.education.item.padding || ('0 ' + style.education.item.paddingBottom + 'px'),
                     backgroundColor: style.education.item.backgroundColor || 'transparent',
                     borderRadius: style.education.item.borderRadius || 0,
                     boxShadow: style.education.item.boxShadow || 'none',
                     borderBottom: style.education.item.borderBottom || 'none'
                   }">
                <div class="item-header"
                     :style="{ 
                       display: 'flex', 
                       justifyContent: style.education.itemHeader.justifyContent,
                       fontSize: style.education.itemHeader.fontSize + 'px'
                     }">
                  <span class="item-main" :style="{ 
                    fontWeight: style.education.itemMain.fontWeight,
                    color: style.education.itemMain.color || style.base.primaryColor
                  }">
                    {{ item.school || '未填写学校' }} - {{ item.major || '未填写专业' }}
                  </span>
                  <span class="item-date" :style="{ 
                    color: style.education.itemDate.color, 
                    fontSize: style.education.itemDate.fontSize + 'px' 
                  }">
                    {{ formatDate(item.startDate) }} - {{ item.endDate ? formatDate(item.endDate) : '至今' }}
                  </span>
                </div>
              </div>
            </div>
            <p v-if="resolvedEducation.every(item => !item.school && !item.major)" class="empty-tip" :style="{ 
              color: style.base.secondaryColor, 
              fontStyle: 'italic',
              fontSize: '12px'
            }">
              未填写教育经历
            </p>
          </div>
          <div class="preview-divider" :style="{
            height: '1px',
            backgroundColor: style.base.dividerColor,
            margin: style.base.spacing + 'px 0',
            display: style.base.dividerColor === 'transparent' ? 'none' : 'block'
          }"></div>
        </div>

        <!-- 3. 工作经验模块（保持不变） -->
        <div class="fixed-module" :style="{ marginBottom: style.base.spacing + 'px' }">
          <h3 class="section-title"
              :style="{
                fontSize: style.work.title.fontSize + 'px',
                fontWeight: style.work.title.fontWeight,
                margin: style.work.title.margin || '0 0 ' + style.work.title.marginBottom + 'px 0',
                color: style.work.title.color,
                paddingLeft: style.work.title.paddingLeft || 0,
                borderLeft: style.work.title.borderLeft || 'none',
                paddingBottom: style.work.title.paddingBottom || 0,
                borderBottom: style.work.title.borderBottom || 'none'
              }">
            工作经验
          </h3>
          <div class="module-content">
            <div class="preview-list">
              <div v-for="(item, index) in resolvedWork.slice(0, 2)" :key="index" class="preview-item"
                   :style="{ 
                     marginBottom: style.work.item.marginBottom + 'px', 
                     padding: style.work.item.padding || ('0 ' + style.work.item.paddingBottom + 'px'),
                     backgroundColor: style.work.item.backgroundColor || 'transparent',
                     borderRadius: style.work.item.borderRadius || 0,
                     boxShadow: style.work.item.boxShadow || 'none',
                     borderBottom: style.work.item.borderBottom || 'none'
                   }">
                <div class="item-header"
                     :style="{ 
                       display: 'flex', 
                       justifyContent: style.work.itemHeader.justifyContent,
                       fontSize: style.work.itemHeader.fontSize + 'px'
                     }">
                  <span class="item-main" :style="{ 
                    fontWeight: style.work.itemMain.fontWeight,
                    color: style.work.itemMain.color || style.base.primaryColor
                  }">
                    {{ item.company || '未填写公司' }} - {{ item.position || '未填写职位' }}
                  </span>
                  <span class="item-date" :style="{ 
                    color: style.work.itemDate.color, 
                    fontSize: style.work.itemDate.fontSize + 'px' 
                  }">
                    {{ formatDate(item.startDate) }} - {{ item.endDate ? formatDate(item.endDate) : '至今' }}
                  </span>
                </div>
                <p class="item-desc"
                   :style="{ 
                     fontSize: style.work.itemDesc.fontSize + 'px', 
                     lineHeight: style.work.itemDesc.lineHeight,
                     marginTop: style.work.itemDesc.marginTop + 'px',
                     color: style.work.itemDesc.color || style.base.secondaryColor,
                     paddingLeft: style.work.itemDesc.paddingLeft || 0
                   }">
                  {{ item.desc || '未填写工作描述' }}
                </p>
              </div>
            </div>
            <p v-if="resolvedWork.every(item => !item.company && !item.position)" class="empty-tip" :style="{ 
              color: style.base.secondaryColor, 
              fontStyle: 'italic',
              fontSize: '12px'
            }">
              未填写工作经验
            </p>
          </div>
          <div class="preview-divider" :style="{
            height: '1px',
            backgroundColor: style.base.dividerColor,
            margin: style.base.spacing + 'px 0',
            display: style.base.dividerColor === 'transparent' ? 'none' : 'block'
          }"></div>
        </div>

        <!-- 4. 技能特长模块（保持不变） -->
        <div class="fixed-module">
          <h3 class="section-title"
              :style="{
                fontSize: style.skills.title.fontSize + 'px',
                fontWeight: style.skills.title.fontWeight,
                margin: style.skills.title.margin || '0 0 ' + style.skills.title.marginBottom + 'px 0',
                color: style.skills.title.color,
                paddingLeft: style.skills.title.paddingLeft || 0,
                borderLeft: style.skills.title.borderLeft || 'none',
                paddingBottom: style.skills.title.paddingBottom || 0,
                borderBottom: style.skills.title.borderBottom || 'none',
                display: style.skills.title.display || 'block'
              }">
            技能特长
          </h3>
          <div class="module-content">
            <p v-if="resolvedSkills" class="skills-text" :style="{
              fontSize: style.skills.content.fontSize + 'px',
              lineHeight: style.skills.content.lineHeight,
              color: style.skills.content.color || style.base.secondaryColor,
              margin: 0,
              padding: style.skills.content.padding || '0',
              backgroundColor: style.skills.content.backgroundColor || 'transparent',
              borderRadius: style.skills.content.borderRadius || 0
            }">
              {{ resolvedSkills }}
            </p>
            <p v-else class="empty-tip" :style="{ 
              color: style.base.secondaryColor, 
              fontStyle: 'italic',
              fontSize: '12px'
            }">
              未填写技能特长
            </p>
          </div>
        </div>
      </div>
    </div>
  </el-card>
</template>

<script setup>
import { computed, onMounted, watch } from 'vue';
import { storeToRefs } from 'pinia';
import { useResumeStore } from '@/store/resumeStore';
// 引入样式
import '@/assets/style/resume/preview.css';

const props = defineProps({
  resume: { type: Object, default: null },
  templateStyle: { type: Object, default: null },
  readOnly: { type: Boolean, default: false }
})

const resumeStore = useResumeStore();
const { skillsList } = storeToRefs(resumeStore);

// 字段获取兼容方法
const getField = (key) => {
  if (props.resume) {
    // 自动兼容 dataValues 嵌套
    const resume = props.resume.dataValues ? props.resume.dataValues : props.resume;
    if (resume.form && resume.form[key] !== undefined) return resume.form[key];
    if (resume.basic_info && resume.basic_info[key] !== undefined) return resume.basic_info[key];
    if (resume[key] !== undefined) return resume[key];
  }
  return resumeStore.form[key];
};

const resolvedEducation = computed(() => {
  const resume = props.resume?.dataValues ? props.resume.dataValues : props.resume;
  return resume?.education_list || resume?.educationList || resumeStore.educationList
});
const resolvedWork = computed(() => {
  const resume = props.resume?.dataValues ? props.resume.dataValues : props.resume;
  return resume?.work_list || resume?.workList || resumeStore.workList
});
const resolvedSkills = computed(() => {
  const resume = props.resume?.dataValues ? props.resume.dataValues : props.resume;
  return resume?.skills_list || resume?.skillsList || skillsList.value
});
const resolvedPhotoUrl = computed(() => {
  let resume = props.resume;
  if (resume) {
    if (resume.dataValues) resume = resume.dataValues; // 自动展开数据层
    return (
      resume.photo_url ||
      resume.form?.photoUrl ||
      resume.basic_info?.photoUrl ||
      ''
    )
  }
  return resumeStore.form.photoUrl
});

// 组件挂载后验证状态（辅助调试）
onMounted(() => {
  console.log('当前模板：', resumeStore.currentTemplate?.name);
  console.log('模板Flex布局样式：', resumeStore.currentTemplate?.style.basic.container);
  console.log('技能特长内容：', skillsList.value);
  console.log('props.resume', props.resume);
});

// 监听技能特长变化
watch(skillsList, (newValue) => {
  console.log('技能特长已更新：', newValue);
}, { immediate: true });

// 完善样式合并逻辑，确保Flex布局属性生效
const style = computed(() => {
  const defaultStyle = {
    base: {
      fontFamily: "Microsoft YaHei, sans-serif",
      primaryColor: "#333",
      secondaryColor: "#666",
      spacing: 14,
      dividerColor: "#eee",
      bgColor: "#fff",
      padding: "20px",
      maxWidth: "750px",
      margin: "0 auto",
      borderRadius: "0px",
      boxShadow: "none"
    },
    photo: { 
      width: 100, // 默认头像尺寸，适配左右布局
      height: 100,
      border: "2px solid #eee", 
      borderRadius: 8,
      boxShadow: "none",
      margin: "0", // 取消默认margin，靠Flex控制
      alignSelf: "flex-start" // 默认顶部对齐
    },
    basic: {
      // 新增：左右布局的Flex容器默认样式
      container: {
        display: "flex",
        justifyContent: "space-between",
        alignItems: "flex-start",
        gap: "20px",
        marginBottom: "15px"
      },
      title: { 
        fontSize: 16, 
        fontWeight: 600, 
        margin: "0 0 10px 0", 
        color: "#333",
        display: "none" // 默认隐藏“基本信息”标题，适配左右布局
      },
      name: { 
        fontSize: 24, 
        fontWeight: "bold", 
        textAlign: "left", // 姓名左对齐
        margin: "0 0 10px 0",
        color: "",
        letterSpacing: "normal"
      },
      infoItem: { 
        fontSize: 14, 
        gap: 16,
        display: "block", // 联系方式换行显示
        flexWrap: "wrap",
        justifyContent: "flex-start"
      },
      intro: { 
        fontSize: 14, 
        lineHeight: 1.7, 
        marginTop: 12,
        color: "",
        textAlign: "left",
        padding: "8px 12px",
        backgroundColor: "rgba(255,255,255,0.7)",
        borderRadius: 6,
        maxWidth: "500px" // 限制简介宽度，避免挤压头像
      }
    },
    education: {
      title: { 
        fontSize: 16, 
        fontWeight: 600, 
        margin: "0 0 12px 0", 
        color: "#333",
        paddingLeft: 0,
        borderLeft: "none",
        paddingBottom: 4,
        borderBottom: "1px solid #eee",
        display: "block"
      },
      item: { 
        marginBottom: 14, 
        padding: "12px 15px",
        backgroundColor: "#fff",
        borderRadius: 8,
        boxShadow: "0 2px 6px rgba(0,0,0,0.05)",
        borderBottom: "none"
      },
      itemHeader: { fontSize: 14, justifyContent: "space-between" },
      itemMain: { fontWeight: 500, color: "" },
      itemDate: { fontSize: 13, color: "#666" }
    },
    work: {
      title: { 
        fontSize: 16, 
        fontWeight: 600, 
        margin: "0 0 12px 0", 
        color: "#333",
        paddingLeft: 0,
        borderLeft: "none",
        paddingBottom: 4,
        borderBottom: "1px solid #eee",
        display: "block"
      },
      item: { 
        marginBottom: 14, 
        padding: "12px 15px",
        backgroundColor: "#fff",
        borderRadius: 8,
        boxShadow: "0 2px 6px rgba(0,0,0,0.05)",
        borderBottom: "none"
      },
      itemHeader: { fontSize: 14, justifyContent: "space-between" },
      itemMain: { fontWeight: 500, color: "" },
      itemDate: { fontSize: 13, color: "#666" },
      itemDesc: { 
        fontSize: 13, 
        lineHeight: 1.6, 
        marginTop: 6, 
        color: "#666",
        paddingLeft: 0
      }
    },
    skills: {
      title: { 
        fontSize: 16, 
        fontWeight: 600, 
        margin: "0 0 12px 0", 
        color: "#333",
        paddingLeft: 0,
        borderLeft: "none",
        paddingBottom: 4,
        borderBottom: "1px solid #eee",
        display: "block"
      },
      content: {
        fontSize: 14,
        lineHeight: 1.6,
        color: "#666",
        padding: "0",
        backgroundColor: "transparent",
        borderRadius: 0
      },
      tag: { 
        padding: "5px 12px", 
        bgColor: "#f5f5f5", 
        borderRadius: 20, 
        fontSize: 13, 
        margin: "0 8px 8px 0",
        color: "",
        border: "none"
      }
    }
  };

  const templateStyle = props.templateStyle || resumeStore.currentTemplate?.style || {};

  // 深层合并：确保模板的Flex布局样式优先覆盖默认值
  return {
    ...defaultStyle,
    ...templateStyle,
    base: { ...defaultStyle.base, ...(templateStyle.base || {}) },
    photo: { ...defaultStyle.photo, ...(templateStyle.photo || {}) },
    basic: {
      ...defaultStyle.basic,
      ...(templateStyle.basic || {}),
      container: { ...defaultStyle.basic.container, ...(templateStyle.basic?.container || {}) }, // 关键：合并Flex容器样式
      title: { ...defaultStyle.basic.title, ...(templateStyle.basic?.title || {}) },
      name: { ...defaultStyle.basic.name, ...(templateStyle.basic?.name || {}) },
      infoItem: { ...defaultStyle.basic.infoItem, ...(templateStyle.basic?.infoItem || {}) },
      intro: { ...defaultStyle.basic.intro, ...(templateStyle.basic?.intro || {}) }
    },
    education: {
      ...defaultStyle.education,
      ...(templateStyle.education || {}),
      title: { ...defaultStyle.education.title, ...(templateStyle.education?.title || {}) },
      item: { ...defaultStyle.education.item, ...(templateStyle.education?.item || {}) },
      itemHeader: { ...defaultStyle.education.itemHeader, ...(templateStyle.education?.itemHeader || {}) },
      itemMain: { ...defaultStyle.education.itemMain, ...(templateStyle.education?.itemMain || {}) },
      itemDate: { ...defaultStyle.education.itemDate, ...(templateStyle.education?.itemDate || {}) }
    },
    work: {
      ...defaultStyle.work,
      ...(templateStyle.work || {}),
      title: { ...defaultStyle.work.title, ...(templateStyle.work?.title || {}) },
      item: { ...defaultStyle.work.item, ...(templateStyle.work?.item || {}) },
      itemHeader: { ...defaultStyle.work.itemHeader, ...(templateStyle.work?.itemHeader || {}) },
      itemMain: { ...defaultStyle.work.itemMain, ...(templateStyle.work?.itemMain || {}) },
      itemDate: { ...defaultStyle.work.itemDate, ...(templateStyle.work?.itemDate || {}) },
      itemDesc: { ...defaultStyle.work.itemDesc, ...(templateStyle.work?.itemDesc || {}) }
    },
    skills: {
      ...defaultStyle.skills,
      ...(templateStyle.skills || {}),
      title: { ...defaultStyle.skills.title, ...(templateStyle.skills?.title || {}) },
      content: { ...defaultStyle.skills.content, ...(templateStyle.skills?.content || {}) },
      tag: { ...defaultStyle.skills.tag, ...(templateStyle.skills?.tag || {}) }
    }
  };
});

// 获取基本容器样式（根据布局类型）
const getBasicContainerStyle = () => {
  const template = resumeStore.currentTemplate;
  const layout = template?.layout || 'left-right';
  
  const baseStyle = {
    ...style.value.basic.container,
    display: 'flex',
    marginBottom: style.value.basic.container?.marginBottom || '15px'
  };
  
  // 根据布局类型调整样式
  switch (layout) {
    case 'left-right':
      return {
        ...baseStyle,
        justifyContent: 'space-between',
        alignItems: 'flex-start',
        gap: '20px'
      };
    case 'top-bottom':
      return {
        ...baseStyle,
        flexDirection: 'column',
        alignItems: 'center',
        textAlign: 'center',
        gap: '16px'
      };
    case 'sidebar':
      return {
        ...baseStyle,
        flexDirection: 'column',
        alignItems: 'center',
        textAlign: 'center',
        gap: '16px'
      };
    case 'two-column':
      return {
        ...baseStyle,
        flexDirection: 'column',
        alignItems: 'center',
        textAlign: 'center',
        gap: '12px'
      };
    case 'grid':
      return {
        ...baseStyle,
        flexDirection: 'column',
        alignItems: 'center',
        textAlign: 'center',
        gap: '12px'
      };
    default:
      return baseStyle;
  }
};

// 获取照片样式（根据布局类型）
const getPhotoStyle = () => {
  const template = resumeStore.currentTemplate;
  const layout = template?.layout || 'left-right';
  
  const basePhotoStyle = {
    width: style.value.photo.width + 'px',
    height: style.value.photo.height + 'px',
    border: style.value.photo.border,
    borderRadius: style.value.photo.borderRadius + 'px',
    overflow: 'hidden',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    fontSize: '12px',
    color: style.value.base.secondaryColor,
    boxShadow: style.value.photo.boxShadow || 'none'
  };
  
  // 根据布局类型调整照片位置
  switch (layout) {
    case 'left-right':
      return {
        ...basePhotoStyle,
        margin: '0',
        alignSelf: 'flex-start'
      };
    case 'top-bottom':
    case 'sidebar':
    case 'two-column':
    case 'grid':
      return {
        ...basePhotoStyle,
        margin: '0 auto 16px auto',
        alignSelf: 'center'
      };
    default:
      return basePhotoStyle;
  }
};

// 获取照片源地址
const getPhotoSrc = (photoUrl) => {
  if (!photoUrl) return '';
  // base64 直接返回
  if (photoUrl.startsWith('data:image/')) return photoUrl;
  // 如果是 /pictures/ 开头（简历照片），添加 /public 前缀
  if (photoUrl.startsWith('/pictures/')) {
    return `http://localhost:7001/public${photoUrl}`;
  }
  // 如果是 /user/ 开头（用户头像），添加 /public 前缀
  if (photoUrl.startsWith('/user/')) {
    return `http://localhost:7001/public${photoUrl}`;
  }
  // 如果已经有 /public 前缀，直接使用
  if (photoUrl.startsWith('/public/')) {
    return `http://localhost:7001${photoUrl}`;
  }
  // 单纯文件名，自动走 /public/pictures/
  if (/^[a-zA-Z0-9_\-\.]+\.(jpg|jpeg|png|webp|gif)$/.test(photoUrl)) {
    return `http://localhost:7001/public/pictures/${photoUrl}`;
  }
  // 其他直接返回
  return photoUrl;
};

// 日期格式化工具
const formatDate = (date) => {
  if (!date) return '未填写';
  const d = new Date(date);
  return `${d.getFullYear()}.${(d.getMonth() + 1).toString().padStart(2, '0')}`;
};
</script>